import React, { useState, useEffect } from 'react'
import { Button,  Spin, Avatar, Tooltip, message } from 'antd'
import { storage } from '@/utils/utils'
import messageModel from 'pages/model/message'
import Link from 'next/link'
import userInfoModel from '../model/user-info'

function PopoverCard (porps) {
  // type 0 粉丝 1关注的人
  const { id, job, city, username, avatar, setFn, status, province } = porps
  const [loading, setLoading] = useState(false)
  const [userInfo, setUserInfo] = useState()
  const [updateStatus, setUpdateStatus] = useState(false)
  useEffect(() => {
    setLoading(true)
    if (id) {
      userInfoModel.getUserInfoDeatil({
        data: {
          id,
          loginId: JSON.parse(storage.get('next_blog_userInfo'))?.id
        }
      }).then(({datas}) => {
        if (datas) {
          setUserInfo(datas)
          setLoading(false)
        }
        
      })
    }
  }, [id, updateStatus])
  const replaceUserRelationship = (userId, _status) => {
    if (_status === 0) {
      messageModel.addMessage({
        data: {
          userId,
          loginId: JSON.parse(storage.get('next_blog_userInfo'))?.id,
          type: 1
        }
      }).then(data => {
        console.log(data)
      })
    }
    userInfoModel.replaceUserRelationship({
      data: {
        id: userId,
        loginId: JSON.parse(storage.get('next_blog_userInfo'))?.id,
        status: _status === 1 ? 0 : 1
      }
    }).then(data => {
      if (data.success) {
        message.success(data.message)
        setUpdateStatus(!updateStatus)
        setFn(!status)
      }
    })
  }
  return (
    <div>
      <Spin spinning={loading}>
        <div className="popover">
          <div className="popover-title">
            <div className="popover-avatar">
              <Avatar src={avatar} size={57}> </Avatar>
            </div>  
            <div className="name_job">
              <p className="name overflow_hidden">{username}</p>
              <p className="job overflow_hidden">{`${job} ${province} ${city}`}</p>
            </div>
          </div> 
          <div className="popover-footer">
            <div className="fans">
              <p className="number">{userInfo?.fansTotal}</p>
              <p>粉丝</p>
            </div>
            <div className="followers">
              <p className="number">{userInfo?.followersTotal}</p>
              <p>关注者</p>
            </div>
            <div className="focusOn">
              {
                (JSON.parse(storage.get('next_blog_userInfo'))?.id === id) ?
                  <Tooltip key="btn" title="返回我的主页"><Link prefetch href={{pathname: '/my-info'}}><Button style={{background: '#fff', borderColor: '#8590a6', width: 96, height: 34, color: '#8590a6'}}  type="primary" >我的主页</Button></Link></Tooltip>
                  :
                  <Tooltip key="btn" title={userInfo?.isFollowers === 1 ? '取消关注' : '关注Ta'}><Button style={{background: '#8590a6', borderColor: '#8590a6', width: 96, height: 34}} onClick={() => replaceUserRelationship(id, userInfo?.isFollowers)}    type="primary" >{userInfo?.isFollowers === 1 ? '已关注' : '关注'}</Button></Tooltip>
                  
              }
            </div>
          </div>
        </div>
        
      </Spin>
    </div>
  )
}

export default  PopoverCard